<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

  <h:head>

    <script type="text/javascript">
      $(function() {
        $(":file").change(function() {
          if (this.files and this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
          }
        });
      });
    </script>

    <script>
      function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // files is a FileList of File objects. List some properties.
        var output = [];
        for (var i = 0, f; f = files[i]; i++) {
          output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate.toLocaleDateString(), '</li>');
        }
        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
      }
      document.getElementById('files').addEventListener('change', handleFileSelect, false);
    </script>
  </h:head>

  <h:body>

    <ui:insert name="content" >
      <ui:include src="menu.xhtml" />
    </ui:insert>

    <!-- container -->
    <div id="content">
      <div class="container">
        <div class="row">

          <!-- DataTable -->
          <div class="span12">
            <!-- <div class="widget-content"> -->
            <h:form id="formImpOcorr"  enctype="multipart/form-data">  
              <div id="page-title" class="clearfix">

                <p:panelGrid columns="1" styleClass="semBorda">
                  <p:inputText style="width: 450px" type="file" id="files" />
                  <output id="list"></output>
                </p:panelGrid>

                <p:panelGrid columns="4" styleClass="semBorda">
                  <h:commandButton class="btn btn-secondary btn-regular" 
                                   style="width: 160px"
                                   value="Validar arquivo" 
                                   action="#{importarOcorrenciaBean.lerArquivo}"/>       

                  <h:commandButton class="btn btn-secondary btn-regular" 
                                   style="width: 160px"
                                   value="Importar arquivo" 
                                   action="#{tipoRequerimentoBean.preparaAlterarTipoRequerimento}"/>       
                </p:panelGrid>
              </div>

              <div id="page-title" class="clearfix">
                <h3>Lista de Ocorrências</h3>
                <p></p>
                <p:dataTable var="lista" 
                             value="#{importarOcorrenciaBean.listaOcorrencias}"
                             rowKey="#{lista.ocorrencia.idOcorrencia}"
                             selectionMode="single"
                             scrollable="true" 
                             scrollHeight="400"
                             selection="#{importarOcorrenciaBean.ocorrencia}"
                             id="tabelaOcorrencias">

                  <p:column headerText="Código do cliente" style="width: 25%; text-align: center">
                    #{lista.ocorrencia.cdOcorrencia}
                  </p:column>

                  <p:column headerText="Descrição da ocorrência" style="width: 90%; text-align: left">
                    #{lista.ocorrencia.dsOcorrencia}
                  </p:column>

                  <p:column headerText="Tipo da ocorrência" style="width: 25%; text-align: center">
                    #{lista.ocorrencia.tipoOcorrencia.idTipoOcorrencia}
                  </p:column>

                  <p:column headerText="Desc. tipo da ocorrência" style="width: 35%; text-align: left">
                    #{lista.ocorrencia.tipoOcorrencia.dsTipoOcorrencia}
                  </p:column>

                  <p:column headerText="Erros" style="width: 10%; text-align: left">
                    #{lista.qteErros}
                  </p:column>
                </p:dataTable>
              </div>
            </h:form>
          </div>
        </div>
      </div>
    </div>
    <!-- DataTable -->
  </h:body>
</html>
